/**
 * 微信小程序登录
 *
 */
import { View, Text, Image } from "@tarojs/components";
import Taro, { navigateTo, switchTab, navigateBack } from "@tarojs/taro";
import { getSearchParams } from "@/lib/get-search-params";
import { SafeArea, Button } from "@nutui/nutui-react-taro";
import { getPhoneNumber } from "@/lib/auth/wechat-mini-program-utils";
import { instance as Log } from "@/lib/log";

function WechatMiniProgram() {
  /**
   * 授权手机号
   */
  const onGetPhoneNumber = (e) => {
    Log.log("小程序手机号授权", e);
    if (e.detail.errMsg === "getPhoneNumber:ok") {
      getPhoneNumber(e, () => {
        const backurl = decodeURIComponent(
          decodeURIComponent(getSearchParams("backurl"))
        );
        const isSwitchTab = getSearchParams("isSwitchTab");
        if (backurl) {
          const _history = isSwitchTab ? switchTab : navigateTo;
          _history({
            url: backurl,
          });
        } else {
          navigateBack();
        }
      });
    } else if (e.detail.errMsg === "getPhoneNumber:fail no permission") {
      Taro.showToast({
        title: "您的微信小程序无获取用户手机号权限",
        icon: "none",
        duration: 2000,
      });
    } else {
      Taro.showToast({
        title: "您未授权",
        icon: "none",
        duration: 2000,
      });
    }
  };
  return (
    <View>
      <SafeArea position="top"></SafeArea>
      <View className="flex items-center justify-center my-[180rpx]">
        <Image
          src={require("@/assets/img/logo/icon-192x192.png")}
          className="w-[100rpx] h-[100rpx]"
        />
        <View className="ml-1 flex flex-col">
          <Text className="text-[36rpx] leading-none font-medium">
            <Text className="text-[#446ea3]">云上</Text>
            <Text className="text-[#bd6f3e]">之枫</Text>
          </Text>
          <Text className="text-[24rpx] text-[#aaa] leading-none mt-1">
            网络工作室
          </Text>
        </View>
      </View>
      <View className="mt-0 mx-[50rpx]">
        <View className="h-[96rpx] relative">
          <Button block type="success" size="large">
            微信用户一键登录
          </Button>
          <button
            onClick={() => {
              wx.showLoading({
                title: "加载中",
                duration: 0,
              });
            }}
            open-type="getPhoneNumber"
            onGetPhoneNumber={onGetPhoneNumber}
            className="opacity-0 absolute left-0 top-0 right-0 bottom-0 z-10"
          />
        </View>
      </View>
      <View className="mt-6 mx-[50rpx] mb-[28rpx]">
        <View className="h-[96rpx] relative">
          <Button
            block
            size="large"
            onClick={() => {
              const backurl = getSearchParams("backurl");
              const isSwitchTab = getSearchParams("isSwitchTab");
              navigateTo({
                url:
                  "/sub_common/pages/auth/login/index" +
                  `?backurl=${backurl}&isSwitchTab=${isSwitchTab}`,
              });
            }}
          >
            手机号登录
          </Button>
        </View>
      </View>
    </View>
  );
}

export default WechatMiniProgram;
